<template>
  <div class="body">
    <el-card shadow="never">
      <div class="header">

        <div class="header-box">
          <span>常见危害症状：</span>
          <el-radio-group v-model="isbox.symptom" @input="box1">
            <el-radio label="全部"></el-radio>
            <el-radio label="常见斑点"></el-radio>
            <el-radio label="变色"></el-radio>
            <el-radio label="变质"></el-radio>
            <el-radio label="变形"></el-radio>
            <el-radio label="物理损伤"></el-radio>
            <el-radio label="表面异物"></el-radio>
          </el-radio-group>
        </div>
        <div class="header-box2">
          <span>常见部位：</span>
          <el-radio-group v-model="isbox.part" @input="box2">
            <el-radio label="全部"></el-radio>
            <el-radio label="株"></el-radio>
            <el-radio label="根"></el-radio>
            <el-radio label="基"></el-radio>
            <el-radio label="干"></el-radio>
            <el-radio label="枝"></el-radio>
            <el-radio label="梢"></el-radio>
            <el-radio label="芽"></el-radio>
            <el-radio label="叶"></el-radio>
            <el-radio label="花"></el-radio>
            <el-radio label="果"></el-radio>
          </el-radio-group>
        </div>
        <div class="header-box3">
          <span>常见植物：</span>
          <el-radio-group v-model="isbox.plant" @input="box3">
            <el-radio label="全部"></el-radio>
            <el-radio label="松"></el-radio>
            <el-radio label="柏"></el-radio>
            <el-radio label="杉"></el-radio>
            <el-radio label="杨"></el-radio>
            <el-radio label="榆"></el-radio>
            <el-radio label="槐"></el-radio>
            <el-radio label="樟"></el-radio>
            <el-radio label="枫"></el-radio>
            <el-radio label="桦"></el-radio>
            <el-radio label="桂"></el-radio>
            <el-radio label="桐"></el-radio>
            <el-radio label="栋"></el-radio>
            <el-radio label="榕"></el-radio>
          </el-radio-group>
        </div>
        <el-form ref="form" inline :model="queryList" label-width="120px">
          <el-form-item label="危害症状：">
            <el-select v-model="queryList.symptom" placeholder="请选择">
              <el-option clearable v-for="(item, index) in symptom" :key="index" :label="item"
                :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="危害部位：">
            <el-select v-model="queryList.part" placeholder="请选择">
              <el-option clearable v-for="(item, index) in part" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="危害植物：">
            <el-select v-model="queryList.plant" placeholder="请选择">
              <el-option clearable v-for="(item, index) in plant" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="常见病状：">
            <el-select v-model="queryList.pest" placeholder="请选择">
              <el-option clearable v-for="(item, index) in pest" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="warning" round class="isBtns" @click="removeList">清空</el-button>
          <el-button type="primary" round class="isBtns" icon="el-icon-caret-right" @click="searchList">点击查询</el-button>
        </el-form>
      </div>
    </el-card>
    <div class="scroll" @click="isImg" ref="isImg">
      <div group="01" id="0111" class="symptom">
        <img src="./static/img/symtom/0111.jpg">
        <span>锈斑</span>
      </div>
      <div group="01" id="0112" class="symptom">
        <img src="./static/img/symtom/0112.jpg">
        <span>褐斑</span>
      </div>
      <div group="01" id="0113" class="symptom">
        <img src="./static/img/symtom/0113.jpg">
        <span>灰斑</span>
      </div>
      <div group="01" id="0114" class="symptom">
        <img src="./static/img/symtom/0114.jpg">
        <span>黑斑</span>
      </div>
      <div group="01" id="0115" class="symptom">
        <img src="./static/img/symtom/0115.jpg">
        <span>白斑</span>
      </div>
      <div group="01" id="0121" class="symptom">
        <img src="./static/img/symtom/0121.jpg">
        <span>圆斑</span>
      </div>
      <div group="01" id="0122" class="symptom">
        <img src="./static/img/symtom/0122.jpg">
        <span>角斑</span>
      </div>
      <div group="01" id="8" class="symptom">
        <img src="./static/img/symtom/0123.jpg">
        <span>星斑</span>
      </div>
      <div group="01" id="0131" class="symptom">
        <img src="./static/img/symtom/0131.jpg">
        <span>轮斑</span>
      </div>
      <div group="02" id="0211" class="symptom">
        <img src="./static/img/symtom/0211.jpg">
        <span>褪绿</span>
      </div>
      <div group="02" id="0212" class="symptom">
        <img src="./static/img/symtom/0212.jpg">
        <span>黄化</span>
      </div>
      <div group="02" id="0213" class="symptom">
        <img src="./static/img/symtom/0213.jpg">
        <span>花叶</span>
      </div>
      <div group="02" id="0221" class="symptom">
        <img src="./static/img/symtom/0221.jpg">
        <span>焦枯</span>
      </div>
      <div group="02" id="0222" class="symptom">
        <img src="./static/img/symtom/0222.jpg">
        <span>赤枯</span>
      </div>
      <div group="02" id="0223" class="symptom">
        <img src="./static/img/symtom/0223.jpg">
        <span>褐枯</span>
      </div>
      <div group="02" id="0231" class="symptom">
        <img src="./static/img/symtom/0231.jpg">
        <span>蓝变</span>
      </div>
      <div group="02" id="0232" class="symptom">
        <img src="./static/img/symtom/0232.jpg">
        <span>红紫</span>
      </div>

      <div group="03" id="0301" class="symptom">
        <img src="./static/img/symtom/0301.jpg">
         <span>溃疡</span>
      </div>
      <div group="03" id="0302" class="symptom">
        <img src="./static/img/symtom/0302.jpg">
        <span>腐烂</span>
      </div>
      <div group="03" id="0303" class="symptom">
        <img src="./static/img/symtom/0303.jpg">
        <span>霉变</span>
      </div>
      <div group="03" id="0304" class="symptom">
        <img src="./static/img/symtom/0304.jpg">
        <span>疮痂</span>
      </div>
      <div group="03" id="0305" class="symptom">
        <img src="./static/img/symtom/0305.jpg">
        <span>炭疽</span>
      </div>
      <div group="03" id="0331" class="symptom">
        <img src="./static/img/symtom/0331.jpg">
        <span>枯死</span>
      </div>

      <div group="04" id="0411" class="symptom">
        <img src="./static/img/symtom/0411.jpg">
        <span>卷曲</span>
      </div>
      <div group="04" id="0412" class="symptom">
        <img src="./static/img/symtom/0412.jpg">
        <span>皱缩</span>
      </div>
      <div group="04" id="0413" class="symptom">
        <img src="./static/img/symtom/0413.jpg">
        <span>下垂</span>
      </div>
      <div group="04" id="0414" class="symptom">
        <img src="./static/img/symtom/0414.jpg">
        <span>青萎</span>
      </div>
      <div group="04" id="0415" class="symptom">
        <img src="./static/img/symtom/0415.jpg">
        <span>枯萎</span>
      </div>
      <div group="04" id="0421" class="symptom">
        <img src="./static/img/symtom/0421.jpg">
        <span>肿瘤</span>
      </div>
      <div group="04" id="0422" class="symptom">
        <img src="./static/img/symtom/0422.jpg">
        <span>虫瘿</span>
      </div>
      <div group="04" id="0423" class="symptom">
        <img src="./static/img/symtom/0423.jpg">
        <span>丛技</span>
      </div>
      <div group="04" id="0431" class="symptom">
        <img src="./static/img/symtom/0431.jpg">
        <span>畸形</span>
      </div>
      <div group="05" id="0501" class="symptom">
        <img src="./static/img/symtom/0501.jpg">
        <span>刻槽</span>
      </div>
      <div group="05" id="0502" class="symptom">
        <img src="./static/img/symtom/0502.jpg">
        <span>蛀孔</span>
      </div>
      <div group="05" id="0503" class="symptom">
        <img src="./static/img/symtom/0503.jpg">
        <span>坑道</span>
      </div>
      <div group="05" id="0504" class="symptom">
        <img src="./static/img/symtom/0504.jpg">
        <span>开裂</span>
      </div>
      <div group="05" id="0505" class="symptom">
        <img src="./static/img/symtom/0505.jpg">
        <span>剥脱</span>
      </div>
      <div group="05" id="0506" class="symptom">
        <img src="./static/img/symtom/0506.jpg">
        <span>啃痕</span>
      </div>
      <div group="05" id="0507" class="symptom">
        <img src="./static/img/symtom/0507.jpg">
        <span>潜痕</span>
      </div>
      <div group="05" id="0508" class="symptom">
        <img src="./static/img/symtom/0508.jpg">
        <span>缺刻</span>
      </div>
      <div group="05" id="0509" class="symptom">
        <img src="./static/img/symtom/0509.jpg">
        <span>穿孔</span>
      </div>
      <div group="05" id="0510" class="symptom">
        <img src="./static/img/symtom/0510.jpg">
        <span>食光</span>
      </div>
      <div group="05" id="0511" class="symptom">
        <img src="./static/img/symtom/0511.jpg">
        <span>折断</span>
      </div>
      <div group="05" id="0512" class="symptom">
        <img src="./static/img/symtom/0512.jpg">
        <span>掐切</span>
      </div>
      <div group="06" id="0601" class="symptom">
        <img src="./static/img/symtom/0601.jpg">
        <span>白粉</span>
      </div>
      <div group="06" id="0602" class="symptom">
        <img src="./static/img/symtom/0602.jpg">
        <span>煤污</span>
      </div>
      <div group="06" id="0603" class="symptom">
        <img src="./static/img/symtom/0603.jpg">
        <span>絮状物</span>
      </div>
      <div group="06" id="0604" class="symptom">
        <img src="./static/img/symtom/0604.jpg">
        <span>结网</span>
      </div>
      <div group="06" id="0605" class="symptom">
        <img src="./static/img/symtom/0605.jpg">
        <span>蛀屑</span>
      </div>
      <div group="06" id="0609" class="symptom">
        <img src="./static/img/symtom/0609.jpg">
        <span>虫粪</span>
      </div>
      <div group="06" id="0610" class="symptom">
        <img src="./static/img/symtom/0610.jpg">
        <span>虫类</span>
      </div>
      <div group="06" id="0611" class="symptom">
        <img src="./static/img/symtom/0611.jpg">
        <span>寄生</span>
      </div>
      <div group="06" id="0612" class="symptom">
        <img src="./static/img/symtom/0612.jpg">
        <span>抑制</span>
      </div>
    </div>

    <div class="footer">
      <el-carousel indicator-position="outside" height="35vh" :autoplay="false"  arrow="always" class="banner_Wrap">
        <div>
          <div class="istxtbox">
            <div class="txext">查询 & 检索</div>
            <div class="txt2"> 简要操作说明：</div>
            <div class="txt3">请选择所见部位、症状、植物种类等条件快速检索；</div>
            <div class="txt4">您也可输入关键词进行查询。</div>
          </div>
          <el-carousel-item v-for="(item, index) in dataList" :key="index">
            <div class="footer-box">
              <img class="isImgs"
                src="https://img0.baidu.com/it/u=1674949878,1465476118&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1671210000&t=8e8407dd0300cc2b6dafcb13d126b14f"
                alt="">
              <div class="isbox1">
                <div class="box1">名称：<span>{{ item.alias }}</span></div>
                <div class="box2">类别：<span>{{ item.classify }}</span></div>
                <div class="box3">症状：<span>{{ item.symptom }}</span></div>
                <div class="box4">危害部位：<span>{{ item.part }}</span></div>
                <div class="box5"> 宿主植物：<span>{{ item.plant }}</span> </div>
              </div>
            </div>
          </el-carousel-item>
        </div>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import $http from '@/main.js'
export default {
  data () {
    return {
      // 筛选数据
      dataList: [],
      queryList: {
        search: '',
        // 危害症状
        symptom: '',
        // 危害部位
        part: '',
        // 危害植物
        plant: '',
        // 常见病状
        pest: '',
        page: 1,
        listRows: 10
      },
      symptom: [],
      part: [],
      plant: [],
      pest: [],
      isbox: {
        search: '',
        symptom: '',
        part: '',
        plant: '',
        pest: '',
        page: 1,
        listRows: 10
      }
    }
  },
  methods: {
    async getList () {
      const { data: res } = await $http.post('index/pest/getPestData')
      this.symptom = res.data.symptom
      this.part = res.data.part
      this.plant = res.data.plant
      this.pest = res.data.pest
      console.log(res)
    },
    async searchList () {
      const { data: res } = await $http.post('index/pest/searchPest', this.queryList)
      if (res.data !== []) {
        this.dataList = res.data
      } else {
        this.dataList = []
        this.$message.info('暂时无数据')
      }
      console.log(this.dataList)
      // eslint-disable-next-line eqeqeq
      if (this.dataList == '') {
        this.$message.info('暂时无数据')
      }
    },
    removeList () {
      this.queryList.symptom = ''
      this.queryList.part = ''
      this.queryList.plant = ''
      this.queryList.pest = ''
      this.dataList = []
      this.isbox.symptom = ''
      this.isbox.part = ''
      this.isbox.plant = ''
      this.queryList.search = ''
    },
    async box1 () {
      // if (this.isbox.symptom === '全部') {
      //   this.isbox.symptom = ''
      // }
      const { data: res } = await $http.post('index/pest/searchPest', this.isbox)
      if (res.data !== []) {
        this.dataList = res.data
      } else {
        this.dataList = []
        this.$message.info('暂时无数据')
      }
      console.log(this.dataList)
      // eslint-disable-next-line eqeqeq
      if (this.dataList == '') {
        this.$message.info('暂时无数据')
      }
    },
    async box2 () {
      // if (this.isbox.part === '全部') {
      //   this.isbox.part = ''
      // }
      const { data: res } = await $http.post('index/pest/searchPest', this.isbox)
      if (res.data !== []) {
        this.dataList = res.data
      } else {
        this.dataList = []
        this.$message.info('暂时无数据')
      }
      console.log(this.dataList)
      // eslint-disable-next-line eqeqeq
      if (this.dataList == '') {
        this.$message.info('暂时无数据')
      }
    },
    async box3 () {
      // if (this.isbox.plant === '全部') {
      //   this.isbox.plant = ''
      // }
      const { data: res } = await $http.post('index/pest/searchPest', this.isbox)
      if (res.data !== []) {
        this.dataList = res.data
      } else {
        this.dataList = []
        this.$message.info('暂时无数据')
      }
      console.log(this.dataList)
      // eslint-disable-next-line eqeqeq
      if (this.dataList == '') {
        this.$message.info('暂时无数据')
      }
    },
    // 图片选择
    isImg () {
      console.log(this.$refs.isImg)
    }
  },
  async created () {
    this.queryList.search = this.$route.query.search
    this.getList()
    const { data: res } = await $http.post('index/pest/searchPest', this.queryList)
    if (res.data !== []) {
      this.dataList = res.data
    } else {
      this.dataList = []
      this.$message.info('暂时无数据')
    }
    console.log(this.dataList)
    // eslint-disable-next-line eqeqeq
    if (this.dataList == '') {
      this.$message.info('暂时无数据')
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  margin: auto;
  // margin-top: vh;
}

.header-box {
  margin-bottom: 2vh;
  margin: auto;
  width: 100%;
  line-height: 4vh;
  background-color: #eeeeee;
  padding-left: 30%;
}

.header-box2 {
  margin-bottom: 2vh;
  margin: auto;
  width: 100%;
  line-height: 4vh;
  background-color: #fff;
  padding-left: 27%;
}

.header-box3 {
  margin-bottom: 2vh;
  margin: auto;
  width: 100%;
  line-height: 4vh;
  background-color: #eeeeee;
  padding-left: 24%;
  margin-bottom: 3vh;
}

.isBtns {
  margin-left: 5vh;
}

// .el-carousel__item h3 {
//     color: #475669;
//     font-size: 18px;
//     opacity: 0.75;
//     line-height: 300px;
//     margin: 0;
//   }

.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #fff;
}

.body {
  width: 100%;
  height: 91vh;
  background-color: #aaaaaa;
}

.footer {
  margin-top: 5vh;
}

.txt1 {
  float: right;
}

.istxtbox {
  text-align: center;
  padding-top: 10vh;
  background-color: #fff;
  padding-bottom: 15vh;

  .txext {
    color: #003388;
    font-size: 22px;
    margin-bottom: 5px;

  }
}

.isImgs {
  float: left;
  // height: 400px;
  // width: 30%;
  margin-right: 30px;
}

.box1 {
  font-size: 22px;
  color: #003388;
  padding: 12px 0px;
  // margin-top: 10%;
}

.box2 {
  margin-bottom: 20px;

  span {
    color: #883300;
    font-size: 18px;
  }
}

.box3 {
  margin-bottom: 20px;

  span {
    color: #883300;
    font-size: 18px;
  }
}

.box4 {
  margin-bottom: 20px;

  span {
    color: #883300;
    font-size: 18px;
  }
}

.box5 {
  margin-bottom: 20px;

  span {
    color: #883300;
    font-size: 18px;
  }
}

// 滚动条样式
.symptom {
  position: relative;
  width: 20vh;
  height: 15vh;
  background-color: aqua;
  border-right: 1px solid;
  white-space: nowrap;
  display: inline-block;
  img{
    width: 20vh;
  height: 15vh;
  }
  span{
    position: absolute;
    top: 10px;
    left: 10px;
    color: #ffff88;
    font-weight: 700;
    font-size: 24px;
    -webkit-text-stroke: 1px #000;
  }
}

.scroll {
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
// .el-button{
//   width: 10vh;
// }
:deep(.el-carousel__button){
  width: 10px !important;
  height: 10px;
  border-radius: 10px;
  background-color: black !important;
}
:deep(.el-carousel--horizontal){
  width: 90%;
  margin-left: 5%;
}
:deep(.el-carousel__arrow){
  width: 50px !important;
  height: 50px !important;
  background-color: #fff;
  // display: ;
}

.banner_Wrap{
  padding: 0 60px;
  :deep(.el-icon-arrow-right){
  font-size: 50px;
  color: #000;
}
:deep(.el-icon-arrow-left){
  font-size: 50px;
  color: #000;

}
:deep(.el-icon-arrow-left){
  left: -55px !important;
}
:deep(.el-icon-arrow-right){
  right: -55px !important;
}
}
</style>
